<template>
  <div class="property-container">
    <!-- icon name -->
    <div class="title">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="element.icon"></use>
        </svg>
        <div class="text">{{element.name}}</div>
    </div>
    <div class=""></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Property',
  props: {
    msg: String
  },
  components: {
  },
  created(){
      console.log(1)
  },
  computed: {
      ...mapGetters([
          'element'
      ])
  },
  // },
  data() {
    return {
      active: ''
    }
  },
  methods: {
      
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* title */
.title {
  display: flex;
  justify-content: center
}
.icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  overflow: hidden;
  /* float: left; */
}
.text {
  /* float: left; */
  vertical-align: middle;
}
.property-container {
    float: right;
    width: 180px;
    height: 100%;
}
</style>
